<template>
  <div class="base-form-toolbar common-toolbar" ref="toolbar">
    <!-- 下拉 -->
    <o-tool-button
      v-show="!showBtns"
      type="dropdown"
      @on-click="handleToolDropClick"
      icon="wy-icon wy-Hamburg"
      placement="bottom-start"
      class="hamberg-btn"
    >
      <div slot="drop">
        <DropdownItem
          v-if="config.insert"
          name="insert_actived"
          :disabled="config.insert.isDisable || !config.insert.auth"
          ><Icon custom="wy-icon wy-insert" class="drop-icon" /><span>{{
            $srv.getI18nByPath('vxe.toolbar.insert')
          }}</span></DropdownItem
        >
        <Dropdown v-if="config.delete.isShow" placement="right-start">
          <DropdownItem
            :disabled="config.delete.isDisable || !config.delete.auth"
            ><Icon custom="wy-icon wy-huishouzhan1" class="drop-icon"/><span>{{
              $srv.getI18nByPath('vxe.toolbar.remove')
            }}</span
            ><Icon type="ios-arrow-forward"></Icon
          ></DropdownItem>
          <DropdownMenu slot="list">
            <DropdownItem
              name="remove"
              :disabled="config.delete.isDisable || !config.delete.auth"
              ><span>{{
                $srv.getI18nByPath('vxe.toolbar.remove')
              }}</span></DropdownItem
            >
            <DropdownItem
              name="delete"
              :disabled="config.delete.isDisable || !config.delete.auth"
              ><span>{{
                $srv.getI18nByPath('vxe.toolbar.directRemove')
              }}</span></DropdownItem
            >
          </DropdownMenu>
        </Dropdown>
        <DropdownItem
          v-if="config.edit.isShow"
          name="edit"
          :disabled="config.edit.isDisable || !config.edit.auth"
          ><Icon custom="wy-icon wy-bianji" class="drop-icon" /><span>{{
            config.edit.value
              ? $srv.getI18nByPath('vxe.toolbar.cancelEdit')
              : $srv.getI18nByPath('vxe.toolbar.edit')
          }}</span></DropdownItem
        >
        <DropdownItem
          v-if="config.save.isShow"
          name="save"
          :disabled="
            config.save.isDisable || (!config.insert.auth && !config.edit.auth)
          "
          ><Icon custom="wy-icon wy-baocun41" class="drop-icon" /><span>{{
            $srv.getI18nByPath('vxe.toolbar.save')
          }}</span></DropdownItem
        >

        <DropdownItem name="search"
          ><Icon custom="wy-icon wy-sousuo13" class="drop-icon" /><span>{{
            $srv.getI18nByPath('vxe.toolbar.search')
          }}</span></DropdownItem
        >

        <template v-if="config.addon">
          <template v-for="(item, idx) of config.addon">
            <Dropdown
              v-if="item.children.length > 0"
              :disabled="!item.auth"
              placement="right-start"
              :key="idx"
            >
              <DropdownItem
                ><Icon :custom="'wy-icon ' + item.icon" class="drop-icon"/><span
                  >{{ $srv.getI18nBySrv(item.title) }}</span
                ><Icon type="ios-arrow-forward"></Icon
              ></DropdownItem>
              <DropdownMenu slot="list">
                <DropdownItem :name="'custom-' + idx" :disabled="!item.auth"
                  ><span>{{ $srv.getI18nBySrv(item.title) }}</span>
                </DropdownItem>
                <template v-for="(d, sidx) of item.children">
                  <DropdownItem
                    :name="'custom-' + idx + '-' + sidx"
                    :disabled="!d.auth"
                    :key="sidx"
                    ><span>{{ d.title }}</span></DropdownItem
                  >
                </template>
              </DropdownMenu>
            </Dropdown>
            <DropdownItem
              v-else
              :key="idx"
              :name="'custom-' + idx"
              :disabled="!item.auth"
              ><Icon :custom="'wy-icon ' + item.icon" class="drop-icon" /><span
                >{{ $srv.getI18nBySrv(item.title) }}</span
              ></DropdownItem
            >
          </template>
        </template>
      </div>
    </o-tool-button>

    <!-- 左边 -->
    <div class="grid-toolbar-left" ref="barLeft" v-show="showBtns">
      <!-- insert -->
      <o-tool-button
        v-if="config.insert.isShow"
        :disabled="config.insert.isDisable || !config.insert.auth"
        type="button"
        @on-click="$emit('commit-event', 'insert_actived')"
        icon="wy-icon wy-insert"
        :title="$srv.getI18nByPath('vxe.toolbar.insert')"
        :showtitle="showText"
      >
      </o-tool-button>
      <o-tool-button
        v-if="config.delete.isShow"
        :disabled="config.delete.isDisable || !config.delete.auth"
        type="button"
        @on-click="$emit('commit-event', 'remove')"
        icon="wy-icon wy-huishouzhan1"
        :title="$srv.getI18nByPath('vxe.toolbar.remove')"
        :showtitle="showText"
      >
      </o-tool-button>
      <!-- save -->
      <o-tool-button
        v-if="config.save.isShow"
        :disabled="
          config.save.isDisable || (!config.insert.auth && !config.edit.auth)
        "
        type="button"
        @on-click="$emit('commit-event', 'save')"
        icon="wy-icon wy-baocun41"
        :title="$srv.getI18nByPath('vxe.toolbar.save')"
        :showtitle="showText"
      >
      </o-tool-button>

      <o-tool-button
        v-if="config.edit.isShow"
        :disabled="config.edit.isDisable || !config.edit.auth"
        :showtitle="showText"
        type="switch"
        v-model="config.edit.value"
        :switchlist="[
          {
            icon: 'wy-icon wy-bianji',
            value: false,
            title: $srv.getI18nByPath('vxe.toolbar.edit')
          },
          {
            icon: 'wy-icon wy-bianji',
            value: true,
            title: $srv.getI18nByPath('vxe.toolbar.cancelEdit')
          }
        ]"
        @on-click="$emit('commit-event', 'edit', $event)"
      ></o-tool-button>

      <div v-if="config.addon" class="custom-btn-section">
        <div
          v-for="(item, idx) of config.addon"
          :key="idx"
          class="custom-btn-inner"
        >
          <o-tool-button
            v-if="item.children.length > 0"
            :disabled="!item.auth"
            type="dropdown"
            :select="true"
            @on-click="doCustomBtnAction(idx, $event)"
            :icon="'wy-icon ' + item.icon"
            :title="$srv.getI18nBySrv(item.title)"
            :showtitle="showText"
          >
            <div slot="drop">
              <template v-for="(d, sidx) of item.children">
                <DropdownItem :disabled="!d.auth" :key="sidx" :name="sidx">{{
                  $srv.getI18nBySrv(d.title)
                }}</DropdownItem>
              </template>
            </div>
          </o-tool-button>
          <o-tool-button
            v-else
            type="button"
            @on-click="doCustomBtnAction(idx)"
            :icon="'wy-icon ' + item.icon"
            :title="$srv.getI18nBySrv(item.title)"
            :disabled="!item.auth"
            :showtitle="showText"
          >
          </o-tool-button>
        </div>
      </div>
    </div>

    <!-- 右边 -->
    <div class="grid-toolbar-right" ref="barRight" v-show="showBtns">
      <o-tool-button
        type="button"
        @on-click="$emit('commit-event', 'search')"
        icon="wy-icon wy-sousuo13"
        :title="$srv.getI18nByPath('vxe.toolbar.search')"
        :showtitle="showText"
      >
      </o-tool-button>

      <slot name="right"></slot>

      <o-tool-button
        v-if="config.refresh.isShow"
        type="button"
        @on-click="$emit('commit-event', 'reload')"
        icon="wy-icon wy-shuaxin13"
        :title="$srv.getI18nByPath('vxe.toolbar.refresh')"
        :showtitle="showText"
      >
      </o-tool-button>

      <div class="controls">
        <Button
          v-if="config.jumpFirst.isShow"
          type="text"
          class="control"
          @click="$emit('commit-event', 'firstRecord')"
          :disabled="config.jumpFirst.isDisable"
          ><Icon custom="wy-icon wy--previous"
        /></Button>
        <Button
          v-if="config.previous.isShow"
          type="text"
          class="control"
          @click="$emit('commit-event', 'prevRecord')"
          :disabled="config.previous.isDisable"
          ><Icon custom="wy-icon wy-previous"
        /></Button>
        <Button
          v-if="config.next.isShow"
          type="text"
          class="control"
          @click="$emit('commit-event', 'nextRecord')"
          :disabled="config.next.isDisable"
          ><Icon custom="wy-icon wy-next"
        /></Button>
        <Button
          v-if="config.jumpLast.isShow"
          class="control"
          type="text"
          @click="$emit('commit-event', 'lastRecord')"
          :disabled="config.jumpLast.isDisable"
          ><Icon custom="wy-icon wy-next1"
        /></Button>
      </div>
      <div class="pages">
        <i-input
          :value="current"
          @on-enter="$emit('commit-event', 'jumpToPage', $event)"
        ></i-input
        >/<span>{{ total }}</span>
      </div>

      <o-tool-button
        type="switch"
        :switchlist="[
          { icon: 'wy-icon wy-ios-expand', value: false },
          { icon: 'wy-icon wy-ios-contract', value: true }
        ]"
        @on-click="$emit('commit-event', 'expand', $event)"
        class="expand-btn"
      ></o-tool-button>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import { Tsrv } from '@/services';

@Component
export default class BaseFormToolbar extends Vue {
  /**
   * props
   */
  @Prop({
    required: true,
    default: () => {
      return {};
    }
  })
  config!: any;

  @Prop({
    required: true,
    default: 0
  })
  current!: number;

  @Prop({
    required: true,
    default: 0
  })
  total!: number;

  private showText: boolean = true;

  private showBtns: boolean = true;

  /**
   * data
   */

  private globalSearchValue: string = '';

  private fullLeft: number = 0;

  private fullRight: number = 0;

  private miniLeft: number = 0;

  private miniRight: number = 0;

  private toolbar: HTMLElement | null = null;

  private left: HTMLElement | null = null;

  private right: HTMLElement | null = null;

  private isFirst = true;

  mounted() {
    setTimeout(() => {
      const erd = this.$elementDetecter();

      this.toolbar = this.$refs.toolbar as HTMLElement;
      this.left = this.$refs.barLeft as HTMLElement;
      this.right = this.$refs.barRight as HTMLElement;
      this.fullLeft = this.getWidth(this.left);
      this.fullRight = this.getWidth(this.right);
      this.miniLeft = 0;
      this.miniRight = 0;

      this.reframe(this.toolbar);
      erd.listenTo(this.toolbar, (el: any) => {
        this.reframe(el);
      });
    }, 0);
  }

  private reframe(el: any) {
    const that = this;
    if (el.offsetWidth > this.fullLeft + this.fullRight + 30) {
      that.showText = true;
      that.showBtns = true;
    } else {
      that.showText = false;
      if (this.isFirst) {
        this.isFirst = false;
        that.$nextTick(() => {
          this.miniLeft = that.getWidth(this.left);
          this.miniRight = that.getWidth(this.right);
        });
      }
      that.showBtns = el.offsetWidth > this.miniLeft + this.miniRight + 30;
    }
  }

  public setSearchText(val: string) {
    this.globalSearchValue = val;
  }

  private doCustomBtnAction(index, subIndex = null) {
    if (subIndex !== null) {
      this.$emit(
        'commit-event',
        'customBtnAction',
        this.config.addon[index].children[subIndex]
      );
    } else {
      this.$emit('commit-event', 'customBtnAction', this.config.addon[index]);
    }
  }

  public handleToolDropClick(name: string | null) {
    if (name !== null && name) {
      if (name.indexOf('-') > -1) {
        const arr = name.split('-');
        if (arr.length === 2) {
          this.doCustomBtnAction(Tsrv.utils.toNumber(arr[1]));
        } else {
          this.doCustomBtnAction(
            Tsrv.utils.toNumber(arr[1]),
            Tsrv.utils.toNumber(arr[2])
          );
        }
      } else if (name === 'edit') {
        this.config.edit.value = !this.config.edit.value;
        this.$emit('commit-event', name, this.config.edit.value);
      } else {
        this.$emit('commit-event', name);
      }
    }
  }

  public getWidth(el: any) {
    return Tsrv.utils.sum(el.children, (e: any) => e.offsetWidth);
  }
}
</script>
<style scoped lang="scss">
.base-form-toolbar ::v-deep {
  height: 42px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
  z-index: 1;
  .custom-btn-section {
    float: right;
    .custom-btn-inner {
      float: left;
    }
  }
  .drop-icon {
    margin-right: 8px;
  }
  .grid-toolbar-right {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    .controls {
      margin: 4px 8px;
      float: left;
      .control {
        border-radius: 50%;
        padding: 0 10px;
        &:hover {
          background-color: var(--default-comp-hover-bgColor);
        }
        .ivu-icon {
          font-size: 12px;
        }
      }
    }
    .pages {
      margin: 9px 2px;
      line-height: 24px;
      float: left;
      ::v-deep .ivu-input-wrapper {
        float: left;
        width: 32px;
        margin-right: 6px;
        .ivu-input {
          height: 24px;
          text-align: center;
        }
      }
      span {
        margin: 0 8px;
      }
    }
  }
  .grid-toolbar-left {
    position: absolute;
    left: 7px;
    top: 0;
    height: 100%;
  }
}
</style>
